<template>
  
  <view class="page">
    <kong v-if="!shopArr||!shopArr.length" />
    <view v-else style="padding-bottom: 200rpx">
      <view
        class="items"
        v-for="(item, index) in shopArr"
        :key="item.shopId"
        @click="redact(item.shopId,index)"
      >
        <view class="top">
          <image
            style="width: 107rpx; height: 28rpx"
            :src="filSrc(item.ka)"
          />
          <view v-if="item.ka">
              <view v-if="getExpired(index)==2">
                <text class="was-due">会员即将到期</text>
              <text @click.stop="getRenew(index)" style="font-size: 28rpx;color: rgb(142,84,244);font-weight: 500;">请续费</text>
              </view>
              <view v-if="getExpired(index)==3">
                <text class="was-due">合成额度不足</text>
              <text @click.stop="getRenew(index)" style="font-size: 28rpx;color: rgb(142,84,244);font-weight: 500;">请续费</text>
              </view>
              <text v-else>有效期至：{{timestamp2Time(item.ka.endDate)}}</text>
            </view>
            
            <view v-else>
              <text class="was-due">已到期</text>
              <text @click.stop="getRenew(index)" style="font-size: 28rpx;color: rgb(142,84,244);font-weight: 500;">请续费</text>
            </view>
        </view>
        <view class="bottom">
          <view style="display: flex">
            <image
              style="width: 100rpx; height: 100rpx; border-radius: 9rpx"
              :src="
                item.shopImgPath
                  ? item.shopImgPath
                  : 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_dianpu@3x.png'
              "
              mode=""
            />
            <view class="introduce">
              <view class="name">{{ item.shopName }}</view>
              <view class="poi">
                <image
                  style="width: 24rpx; height: 24rpx"
                  src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_icon_ddianpoi.png"
                  mode=""
                />
                <text
                  style="
                    width: 464rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: block;
                  "
                  >{{ item.shopAddress }}</text
                >
              </view>
              <view class="profession">
                <image
                  style="width: 24rpx; height: 24rpx"
                  src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_icon_hyflei.png"
                  mode=""
                />
                <text>{{
                  item.shopCate1Obj.shopCate1Name + "-" + item.shopCate2Obj.shopCate2Name
                }}</text>
              </view>
            </view>
          </view>
          <image
            style="width: 48rpx; height: 48rpx; margin-top: 50rpx"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"
            mode=""
          />
        </view>
      </view>
      <!-- <view 
        v-for="item,index in shopArr"
        :key="item.shopId"
		class="popup-bottom-box"
		>
            <view class="state" :class="{'expire':item.state!=1}">{{ item.state==1?'会员':'未开通' }}</view>
			<view class="popup-bottom-lift">
				<image style="width: 128rpx;height: 128rpx;margin-right: 18rpx;" :src="item.shopImgPath?item.shopImgPath:img" />
				<view>
					<p style="margin-bottom: 6rpx;font-size: 32rpx;color: rgb(48,49,51);">{{ item.shopName }}</p>
                    <image v-if="item.ka?item.ka.state==2:false" style="width: 112rpx;height: 28rpx;margin: 12rpx 0;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jcban.png" />
                    <p style="font-weight: 400;font-size: 24rpx;color: rgb(144,147,153);">创建日期：{{ timestamp2Time(item.createDate) }}</p>
                    <p v-if="item.ka?item.ka.state==2:false" style="font-weight: 400;font-size: 24rpx;color: rgb(142,84,244);">会员期至：{{timestamp2Time(item.ka.endDate)}}</p>
                    <p v-else :class="text-color" style="font-weight: 400;font-size: 24rpx;color: rgb(142,84,244);">会员期至：已到期</p>
				</view>
			</view>
			<view class="bottom-btns">
                <button class="btn" @click="redact(index)">编辑</button>
                <button class="delbtn" :class="{'disable':item.state==1}" @click="delShop(item.shopId)" :disabled="item.state==1">删除</button>
            </view>
		</view> -->
    </view>
    <view class="box">
      <view class="addshop" @click="addShop()">添加新店铺</view>
    </view>
  </view>
  <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog ref="inputClose" type="info" title="请输入卡密" @confirm="dialogInputConfirm"> 
          <input style="border: 1px solid rgb(144,147,153);font-size: 22rpx;border-radius: 8rpx;width: 400rpx;" type="text" v-model="kaMi">
        </uni-popup-dialog>        
		</uni-popup>
</template>

<script>
import { httpRequest } from "../../utils/http";
import kong from "../../components/index/kong.vue";
export default {
  name: "UniPresetVueVite1Management",
  components:{
    kong:kong
  },
  data() {
    return {
      shopArr: [],
      img:
        "https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/topUp1@3x.png",
      shopText: "",
      kaMi:''
    };
  },
  onLoad(e) {
    this.shopArr = uni.getStorageSync("shop");
    this.shopArr = this.shopArr.filter((e) => e.ka);
  },
  methods: {
    filSrc(e){
      if(e.productName=='基础版'||!e.productName)return 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/bb_icon_jcban_jhuo.png'
      if(e.productName=='旗舰版')return 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/bb_icon_qjban_jhuo.png'
      if(e.productName=='专业版')return 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/bb_icon_zyban_jhuo.png'
    },
    getRenew(i){
        this.index = i
        uni.pageScrollTo({ scrollTop: 0 })
        this.$refs.inputDialog.open('center')
      },
      async dialogInputConfirm(e){
        if(!this.kaMi)return uni.showToast({
          title: '输入不能为空',
          icon: 'none'
        })
      const res = await httpRequest('/api/shopRenewal','POST',{
        shopId:this.shopArr[this.index].shopId,
        kaMi:this.kaMi
      })
      if(res.code=='0'){
        uni.showToast({title:'续费成功',icon:'none'})
        this.getShop()
      }else{
        uni.showToast({title:'卡密无效或已被使用',icon:'none'})
      }
    },
    getExpired(index){
      //判断卡是否过期（过期为空）1：已过期 2：三天后到期 3：余额不足50次
      if (!this.shopArr[index].ka)return 1
      //判段是否3天后到期或者余额不足50次
      const threeDaysLater = new Date(this.currentTime + this.millisecondsPerDay*3).getTime();
      if(this.shopArr[index].ka.endDate<threeDaysLater)return 2
      if(this.shopArr[index].ka.useNum<50)return 3
      this.isExpired = 0
    },
    addShop() {
      uni.navigateTo({ url: "/pageC/index/shop" });
    },
    redact(id,i) {
      if(this.shopArr[i].isAccredit?true:false){
        return uni.showToast({
          title: '暂无权限',
          icon: 'none'
        })
      }
      uni.navigateTo({
        url: `/pageC/index/shop?shop=${id}`,
      });
    },
    delShop(i) {
      uni.showModal({
        title: "提示",
        content: "确定删除吗?",
        showCancel: true,
        success: async ({ confirm, cancel }) => {
          if (confirm) {
            await httpRequest("/api/delShop", "POST", { shopId: i });
            uni.showToast({
              title: "删除成功",
              icon: "none",
            });
            this.getShop();
          } else {
            return;
          }
        },
      });
    },
    async getShop() {
      const res = await httpRequest("/api/shopByBusinId", "POST", {
        businessId: uni.getStorageSync("business").businessId,
      });
      const res1 = await httpRequest('/api/empowerShopByBusinId','POST',{
        businessId: uni.getStorageSync("business").businessId,
      })
      const accreditList = res1.data
      accreditList.forEach(e=>e.isAccredit = true)
      if (res.error) return;
      console.log(res);
      // if(res.data.length<1){
      // 	return uni.navigateTo({ url: '/pageC/index/shop' })
      // }
      if (res.data.length != 0) {
        this.shopText = res.data[0].shopName;
        uni.setStorageSync("shopText", this.shopText);
      }
      this.shopArr = [...res.data,...accreditList];
      uni.setStorageSync("shop", this.shopArr);
    },
    timestamp2Time(time) {
      // 使用Date对象将时间戳转换为日期对象
      const date = new Date(time);

      // 获取日期的各个部分，如年、月、日、时、分、秒
      const year = date.getFullYear(); // 年
      const month = date.getMonth() + 1; // 月 (注意月份从0开始，需要加1)
      const day = date.getDate(); // 日
      const hours = date.getHours(); // 时
      const minutes = date.getMinutes(); // 分
      const seconds = date.getSeconds(); // 秒

      // 构建日期字符串，例如：2022-10-08 14:30:00
      const formattedDate = `${year}-${month
        .toString()
        .padStart(2, "0")}-${day.toString().padStart(2, "0")} ${hours
        .toString()
        .padStart(2, "0")}:${minutes
        .toString()
        .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
      const ymdData = `${year}-${month
        .toString()
        .padStart(2, "0")}-${day.toString().padStart(2, "0")}`; // 输出格式化后的日期字符串
      return ymdData;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: 1624rpx;
  padding: 30rpx;
  background-color: rgb(246,248,251);
  .items {
    width: 690rpx;
    height: 288rpx;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.1);
    .top {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 84rpx;
      width: 100%;
      background-color: rgba(142, 84, 244, 0.05);
      padding: 0 30rpx;
      font-size: 24rpx;
      border-radius: 8rpx 8rpx 0 0;
      color: rgb(142, 84, 244);
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      width: 100%;
      height: 204rpx;
      padding: 30rpx 6rpx 30rpx 30rpx;
      background-color: #fff;
      border-radius:0 0 8rpx 8rpx;
      .introduce {
        font-size: 24rpx;
        color: rgb(144, 147, 153);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 12rpx;
        .name {
          font-size: 32rpx;
          color: rgb(48, 49, 51);
        }
        .poi{
          display: flex;
          align-items: center;
        }
        .profession{
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .popup-bottom-box {
    height: 323rpx;
    margin-top: 24rpx;
    background-color: #fff;
    border-radius: 16rpx;
    &:first-child {
      margin-top: 0; // 将第一个元素的上外边距设置为零
    }
    .state {
      width: 132rpx;
      height: 56rpx;
      background-color: rgb(58, 224, 125);
      color: #fff;
      text-align: center;
      line-height: 56rpx;
      font-size: 28rpx;
      border-radius: 16rpx 0 16rpx 0;
    }
    .expire {
      background-color: rgb(249, 249, 249) !important;
      color: rgb(69, 70, 74) !important;
    }
    .popup-bottom-lift {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: rgba(48, 49, 51, 1);
      font-weight: 700;
      height: 226rpx;
      width: 642rpx;
      padding: 18rpx 0;
      margin-left: 24rpx;
      border-bottom: 1rpx solid rgb(220, 223, 230);
      .try-text {
        font-size: 24rpx;
        color: rgba(114, 147, 153, 1);
      }
    }
    .bottom-btns {
      display: flex;
      justify-content: flex-end;
      padding-right: 24rpx;
      margin-top: 24rpx;
      .btn {
        width: 104rpx;
        height: 56rpx;
        background-color: rgba(241, 241, 241, 1);
        text-align: center;
        line-height: 56rpx;
        font-size: 28rpx;
        margin: 0;
        padding: 0;
        margin-right: 24rpx;
        color: rgb(69, 70, 74);
      }
      .delbtn {
        width: 104rpx;
        height: 56rpx;
        text-align: center;
        line-height: 56rpx;
        font-size: 28rpx;
        background-color: rgb(255, 55, 71);
        color: #fff;
        margin: 0;
        padding: 0;
      }
    }
  }
  .box {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 166rpx;
    background-color: #fff;
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;

    .addshop {
      width: 690rpx;
      height: 96rpx;
      text-align: center;
      line-height: 96rpx;
      font-size: 32rpx;
      background-color: rgba(142, 84, 244, 1);
      color: #fff;
      margin-top: 16rpx;
      border-radius: 8rpx;
    }
  }
}
.disable {
  opacity: 0.3;
}
.text-color {
  color: rgb(144, 147, 153) !important;
}
</style>
